<template>
    <view class="container consultation-page">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">{{doctorInfo.name}}</view>
            <view class="right">
                <u-icon name="more-dot-fill" size="32" color="#333" @click="showMore"></u-icon>
            </view>
        </view>
        
        <!-- 聊天区域 -->
        <scroll-view 
            id="chatScrollView"
            class="chat-scroll" 
            scroll-y="true"
            @scrolltoupper="loadMore"
            :refresher-enabled="false"
            :bounce="false"
            :enable-back-to-top="true"
        >
            <view class="chat-container">
                <!-- 系统消息 -->
                <view class="system-message" v-if="systemMessage">
                    <text>{{systemMessage}}</text>
                </view>
                
                <!-- 消息列表 -->
                <view class="message-list">
                    <!-- 按日期分组显示消息 -->
                    <block v-for="(group, groupIndex) in messagesByDate" :key="'date-' + groupIndex">
                        <!-- 日期分隔线 -->
                        <view class="date-separator">
                            <text class="date-text">{{formatDateForDisplay(group.date)}}</text>
                        </view>
                        
                        <!-- 该日期下的消息 -->
                        <view 
                            v-for="(message, msgIndex) in group.messages" 
                            :key="'msg-' + groupIndex + '-' + msgIndex"
                            class="message-item" 
                            :class="{'self': message.isSelf, 'highlight': message.highlight}"
                            :id="`msg-${message.index}`"
                        >
                            <view class="avatar" @click="viewProfile(message.isSelf)">
                                <image :src="message.isSelf ? userAvatar : doctorAvatar" mode="aspectFill"></image>
                            </view>
                            
                            <view class="content">
                                <view class="bubble" :class="{'text': message.type === 'text', 'image': message.type === 'image'}">
                                    <text v-if="message.type === 'text'">{{message.content}}</text>
                                    <image v-if="message.type === 'image'" :src="message.content" mode="widthFix" @click="previewImage(message.content)"></image>
                                </view>
                                <view class="time">{{formatTimeOnly(message.time)}}</view>
                            </view>
                        </view>
                    </block>
                </view>
                
                <!-- 占位元素，确保滚动到底部 -->
                <view id="msg-bottom" style="height: 10px; width: 100%;"></view>
            </view>
        </scroll-view>
        
        <!-- 输入区域 -->
        <view class="input-area">
            <view class="input-box">
                <view class="tools">
                    <u-icon name="photo" size="40" color="#666" @click="chooseImage"></u-icon>
                    <u-icon name="camera" size="40" color="#666" @click="takePhoto"></u-icon>
                </view>
                
                <view class="input">
                    <input type="text" v-model="inputMessage" placeholder="请输入消息" @confirm="sendMessage" cursor-spacing="20" />
                </view>
                
                <view class="send" @click="sendMessage">
                    <text>发送</text>
                </view>
            </view>
        </view>
        
        <!-- 底部安全区占位 -->
        <view class="safe-area-inset-bottom"></view>
        
        <!-- 自定义tabBar -->
        <!-- <custom-tabbar v-if="showCustomTabBar"></custom-tabbar> -->
    </view>
</template>

<script>
import request from '@/util/request'
import { mapState, mapActions } from 'vuex'
import config from '@/common/config'
export default {
    data() {
        return {
            doctorId: "1917552986976768002",
            doctorInfo: {
                name: '张医生',
                avatar: '/static/touxiang.png' // 默认医生头像
            },
            defaultAvatar: '/static/touxiang.png', // 默认头像
            systemMessage: '您已成功连接医生，现在可以开始咨询了',
            messageList: [
                {
                    type: 'text',
                    content: '您好，我是张医生，请问有什么可以帮您？',
                    time: '10:00',
                    isSelf: false
                },
                {
                    type: 'text',
                    content: '医生您好，我最近经常头晕，想咨询一下',
                    time: '10:01',
                    isSelf: true
                },
                {
                    type: 'text',
                    content: '请问头晕的频率和持续时间是怎样的？',
                    time: '10:02',
                    isSelf: false
                }
            ],
            inputMessage: '',
            targetDate: '', // 用于定位到指定日期的消息
            hasScrolled: false, // 用于记录是否已经滚动到目标位置
            isLocatingToDate: false, // 新增：是否正在定位到指定日期的标志
            showCustomTabBar: true, // 显示自定义TabBar
            websocket: getApp().globalData.websocket, // WebSocket连接对象
            isWebSocketConnected: getApp().globalData.isWebSocketConnected, // WebSocket连接状态
        }
    },
    computed: {
        ...mapState(['userInfo']),
        userAvatar() {
            // 返回用户头像，如果没有则使用默认头像
            return (this.userInfo && this.userInfo.avatar) ? this.userInfo.avatar : this.defaultAvatar;
        },
        doctorAvatar() {
            // 返回医生头像，如果没有则使用默认头像
            return (this.doctorInfo && this.doctorInfo.avatar) ? this.doctorInfo.avatar : this.defaultAvatar;
        },
        shouldAutoScrollToBottom() {
            return !this.isLocatingToDate && (!this.targetDate || this.hasScrolled);
        },
        shouldScrollToDate() {
            return this.targetDate && !this.hasScrolled;
        },
        // 新计算属性：按日期分组的消息
        messagesByDate() {
            if (!this.messageList || this.messageList.length === 0) {
                return [];
            }
            
            const groups = {};
            
            // 为每条消息添加原始索引
            this.messageList.forEach((message, index) => {
                const date = this.extractDateFromTime(message.time);
                
                if (!groups[date]) {
                    groups[date] = {
                        date: date,
                        messages: []
                    };
                }
                
                // 复制消息对象并添加索引
                const messageCopy = { ...message, index };
                groups[date].messages.push(messageCopy);
            });
            
            // 将对象转换为数组并按日期排序
            return Object.values(groups).sort((a, b) => {
                return new Date(a.date) - new Date(b.date);
            });
        }
    },
    watch: {
        // 监听消息列表的变化，自动滚动到底部
        messageList: {
            handler() {
                console.log("消息列表变化了，总消息数:", this.messageList.length, 
                           "是否应自动滚动:", this.shouldAutoScrollToBottom);
                
                // 使用计算属性判断是否应该滚动到底部
                if (this.shouldAutoScrollToBottom) {
                    // 延迟执行滚动确保DOM已更新
                    setTimeout(() => {
                        this.scrollToBottom();
                    }, 100);
                }
            },
            deep: true
        }
    },
    methods: {
		...mapActions(['app', 'setCurrentChatDoctorId']),
        async loadDoctorInfo() {
            try {
                // 显示加载提示
                uni.showLoading({
                    title: '加载中...',
                    mask: true
                });
                
                // 获取医生ID - 使用路由参数或者默认值
                const id = this.doctorId || 1; // 默认值为1，防止无法获取ID导致加载失败
        
                // 尝试从服务器获取医生信息
                try {
                    // 由于API可能不可用，我们使用模拟数据
                    // const res = await request.get(`/api/doctor/info/${id}`);
                    // 模拟API返回数据
                    const res = {
                        code: 200,
                        data: {
                            id: id,
                            name: '张医生',
                            avatar: '',  // 空值将使用默认头像
                            title: '主任医师',
                            department: '神经内科'
                        }
                    };
                    
                    if (res.code === 200 && res.data) {
                        this.doctorInfo = res.data;
                        
                        // 如果没有头像，使用默认头像
                        if (!this.doctorInfo.avatar) {
                            this.doctorInfo.avatar = this.defaultAvatar;
                        }
                    }
                } catch (error) {
                    console.error('获取医生信息错误:', error);
                    // 使用默认医生信息，不中断流程
                }
                
                // 不论医生信息是否获取成功，都加载聊天记录
                this.loadChatHistory();
            } finally {
                // 确保无论如何都关闭加载提示
                uni.hideLoading();
            }
        },
        
        // 加载聊天历史记录
        loadChatHistory() {
            try {
                // 从本地存储加载聊天记录
                const chatKey = `chat_history_${this.doctorId}`;
                const savedChat = uni.getStorageSync(chatKey);
                console.log('尝试加载聊天记录, key:', chatKey);
                
                if (savedChat) {
                    try {
                        const chatHistory = JSON.parse(savedChat);
                        if (Array.isArray(chatHistory) && chatHistory.length > 0) {
                            this.messageList = chatHistory;
                            console.log('已加载本地聊天记录', chatHistory.length, '条');
                            uni.showToast({
                                title: `已加载${chatHistory.length}条消息`,
                                icon: 'none',
                                duration: 1500
                            });
                        } else {
                            console.log('聊天记录为空或格式错误');
                        }
                    } catch (e) {
                        console.error('解析聊天记录失败:', e);
                    }
                } else {
                    console.log('未找到聊天记录');
                }
                
                // 无论是否加载成功，都确保有默认消息
                if (this.messageList.length === 0) {
                    this.messageList = [
                        {
                            type: 'text',
                            content: `您好，我是${this.doctorInfo.name}，请问有什么可以帮您？`,
                            time: this.formatTime(new Date()),
                            isSelf: false
                        }
                    ];
                }
                
                // 消息加载完成后，尝试多次滚动确保最终能滚动到底部
                this.scrollToBottomWithRetry();
                
            } catch (error) {
                console.error('加载聊天记录错误:', error);
            }
        },
        
        // 多次尝试滚动到底部的方法
        scrollToBottomWithRetry() {
            // 如果需要滚动到特定日期，直接执行定位
            if (this.shouldScrollToDate) {
                console.log('需要滚动到特定日期，执行定位');
                setTimeout(() => {
                    this.scrollToTargetDate();
                }, 300);
                return;
            }
            
            const retryCount = 2; // 尝试次数
            const retryInterval = 500; // 尝试间隔(毫秒)
            
            let attempt = 0;
            
            const attemptScroll = () => {
                attempt++;
                console.log(`第${attempt}次尝试滚动到底部`);
                
                // 使用计算属性判断是否应该滚动
                if (this.shouldAutoScrollToBottom) {
                    this.scrollToBottom();
                }
                
                if (attempt < retryCount && this.shouldAutoScrollToBottom) {
                    setTimeout(attemptScroll, retryInterval);
                }
            };
            
            // 开始第一次尝试
            setTimeout(attemptScroll, 300);
        },
        
        // 滚动到目标日期的消息
        scrollToTargetDate() {
            // 确保启用定位模式
            this.isLocatingToDate = true;
            
            // 查找目标日期的第一条消息
            const targetIndex = this.messageList.findIndex(msg => {
                // 提取消息时间的日期部分进行比较
                let msgDate = msg.time;
                if (msgDate.includes(' ')) {
                    msgDate = msgDate.split(' ')[0]; // 提取日期部分
                } else {
                    // 如果只是HH:MM格式，则为今天的消息
                    const today = new Date();
                    msgDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
                }
                return msgDate === this.targetDate;
            });
            
            if (targetIndex !== -1) {
                console.log('找到目标日期消息，滚动到索引:', targetIndex);
                
                // 先设置hasScrolled为true，防止messageList变化时再次滚动到底部
                this.hasScrolled = true;
                
                // 使用选择器获取目标元素位置
                uni.createSelectorQuery()
                   .in(this)
                   .select(`#msg-${targetIndex}`)
                   .boundingClientRect(data => {
                        if (data) {
                            console.log('目标元素位置:', data.top);
                            this.scrollToPosition(data.top);
                            
                            // 添加高亮效果
                            this.$set(this.messageList[targetIndex], 'highlight', true);
                            
                            // 3秒后移除高亮
                            setTimeout(() => {
                                if (this.messageList[targetIndex]) {
                                    this.$set(this.messageList[targetIndex], 'highlight', false);
                                }
                            }, 3000);
                        } else {
                            console.log('未找到目标元素');
                            this.isLocatingToDate = false; // 退出定位模式
                            this.scrollToBottom();
                        }
                   })
                   .exec();
            } else {
                console.log('未找到目标日期消息，滚动到底部');
                this.isLocatingToDate = false; // 退出定位模式
                this.scrollToBottom();
            }
        },
        
        // 滚动到指定位置
        scrollToPosition(position) {
            uni.createSelectorQuery()
               .in(this)
               .select('#chatScrollView')
               .boundingClientRect(data => {
                    if (data) {
                        const scrollView = uni.createSelectorQuery().in(this).select('#chatScrollView').node();
                        if (scrollView && scrollView.scrollTo) {
                            console.log('使用scrollTo滚动到位置:', position);
                            scrollView.scrollTo({ top: position, behavior: 'smooth' });
                        } else {
                            // 备选方案：使用pageScrollTo
                            console.log('使用pageScrollTo滚动到位置:', position);
                            uni.pageScrollTo({
                                scrollTop: position,
                                duration: 300
                            });
                        }
                    }
               })
               .exec();
        },
        
        // 直接操作DOM的滚动到底部方法
        scrollToBottom() {
            console.log('尝试滚动到底部');
            
            // 方法1：使用选择器获取scroll-view高度并设置scrollTop
            try {
                const query = uni.createSelectorQuery().in(this);
                query.select('.chat-container').boundingClientRect();
                query.select('#chatScrollView').boundingClientRect();
                query.exec(res => {
                    if (res && res[0] && res[1]) {
                        const containerHeight = res[0].height;
                        const scrollViewHeight = res[1].height;
                        const scrollTop = containerHeight - scrollViewHeight;
                        
                        console.log('容器高度:', containerHeight, '滚动视图高度:', scrollViewHeight, '需要滚动距离:', scrollTop);
                        
                        // 方法1：使用编程方式直接设置scrollTop
                        const scrollView = uni.createSelectorQuery().in(this).select('#chatScrollView').node();
                        if (scrollView && scrollView.scrollTo) {
                            console.log('使用scrollTo滚动到底部');
                            scrollView.scrollTo({ top: scrollTop + 9999, behavior: 'auto' });
                        } else {
                            // 方法2：使用pageScrollTo
                            console.log('使用pageScrollTo滚动到底部');
                            uni.pageScrollTo({
                                scrollTop: scrollTop + 9999,
                                duration: 100
                            });
                        }
                        
                        // 方法3：直接操作页面的scroll-view元素
                        try {
                            const scrollViewElement = document.getElementById('chatScrollView');
                            if (scrollViewElement) {
                                console.log('直接设置DOM元素scrollTop');
                                scrollViewElement.scrollTop = containerHeight + 9999;
                            }
                        } catch (e) {
                            console.log('DOM操作失败:', e);
                        }
                    } else {
                        console.error('获取高度失败:', res);
                    }
                });
            } catch (e) {
                console.error('滚动操作失败:', e);
            }
            
            // 备选方案：使用页面滚动
            setTimeout(() => {
                try {
                    uni.pageScrollTo({
                        scrollTop: 99999,
                        duration: 100
                    });
                } catch (e) {
                    console.error('页面滚动失败:', e);
                }
            }, 100);
        },
        
        // 保存聊天记录到本地
        saveChatHistory() {
            try {
                const chatKey = `chat_history_${this.doctorId}`;
                uni.setStorageSync(chatKey, JSON.stringify(this.messageList));
                console.log('聊天记录已保存', this.messageList.length, '条');
            } catch (error) {
                console.error('保存聊天记录失败:', error);
            }
        },
        
        goBack() {
            uni.navigateBack()
        },
        showMore() {
            const itemList = ['发送图片', '查看历史记录', '查看历史评价', '清空聊天记录', '结束对话']
            uni.showActionSheet({
                itemList,
                success: (res) => {
                    if (res.tapIndex === 0) {
                        this.uploadImage()
                    } else if (res.tapIndex === 1) {
                        this.goToRecordHistory()
                    } else if (res.tapIndex === 2) {
                        this.goToReviewsHistory()
                    } else if (res.tapIndex === 3) {
                        this.clearChatHistory()
                    } else if (res.tapIndex === 4) {
                        this.endConsultation()
                    }
                }
            })
        },
        goToRecordHistory() {
            if (!this.doctorInfo || !this.doctorInfo.id) {
                console.error('医生ID不存在，无法跳转到历史记录');
                uni.showToast({
                    title: '无法获取医生信息',
                    icon: 'none'
                });
                return;
            }
            
            console.log('跳转到历史记录，医生ID:', this.doctorInfo.id);
            uni.navigateTo({
                url: `/pages/consultation/record-history?doctorId=${this.doctorInfo.id}`
            });
        },
        goToReviewsHistory() {
            uni.navigateTo({
                url: `/pages/consultation/reviews?doctorId=${this.doctorInfo.id}`
            })
        },
        loadMore() {
            // 加载更多历史消息
        },
        chooseImage() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    this.sendImage(res.tempFilePaths[0])
                }
            })
        },
        takePhoto() {
            uni.chooseImage({
                count: 1,
                sourceType: ['camera'],
                success: (res) => {
                    this.sendImage(res.tempFilePaths[0])
                }
            })
        },
        previewImage(url) {
            uni.previewImage({
                urls: [url]
            })
        },
        sendMessage() {
            if (!this.inputMessage.trim()) {
                return;
            }
            
            // 发送新消息时取消定位模式
            this.isLocatingToDate = false;
            
            // 添加消息到列表
            this.messageList.push({
                id: Date.now(),
                sender: 'user',
                content: this.inputMessage,
                time: this.formatTime(new Date()),
                isSelf: true,
                type: 'text'
            });
            
			const message = {
			    type: 'text',
			    content: this.inputMessage,
			    time: this.formatTime(new Date()),
			    isSelf: true
			};
			
			// 清空输入框
            this.inputMessage = '';
            
            // 保存聊天记录
            this.saveChatHistory();
			
			// 发送到服务器
			this.sendMessageToServer(message);
            
            // 滚动到底部 (由messageList的watch处理)
            
            // 模拟医生回复
            // setTimeout(() => {
            //     this.simulateReceiveMessage(message.content);
            // }, 1000);
			
			
        },
        
        // 简化模拟接收消息
        simulateReceiveMessage(userMessage) {
            // 发送或接收新消息时取消定位模式
            this.isLocatingToDate = false;
            
            // 根据用户消息生成医生回复
            let doctorReply = '';
            
            if (userMessage.includes('你好') || userMessage.includes('Hi') || userMessage.includes('hello')) {
                doctorReply = `您好，我是${this.doctorInfo.name}医生，很高兴为您服务。请问有什么可以帮助您的吗？`;
            } else if (userMessage.includes('头痛') || userMessage.includes('疼')) {
                doctorReply = '您描述的症状可能是由多种原因引起的。请问您的头痛是持续性的还是间歇性的？是否伴有其他不适症状如恶心、呕吐、视力模糊等？';
            } else if (userMessage.includes('谢谢') || userMessage.includes('感谢')) {
                doctorReply = '不客气，这是我应该做的。如果还有其他问题，随时咨询我。祝您健康！';
            } else {
                doctorReply = '我已收到您的消息。为了更准确地了解您的情况，可以请您详细描述一下症状吗？比如开始时间、严重程度、是否有缓解或加重因素等。';
            }
            
            // 添加医生回复
            this.messageList.push({
                id: Date.now(),
                sender: 'doctor',
                content: doctorReply,
                time: this.formatTime(new Date()),
                isSelf: false,
                type: 'text'
            });
            
            // 保存聊天记录
            this.saveChatHistory();
            
            // 滚动到底部 (由messageList的watch处理)
        },
        
        // 发送消息逻辑简化，确保滚动到底部
        sendImage(url) {
            // 发送新消息时取消定位模式
            this.isLocatingToDate = false;
            
            // 创建图片消息
            const message = {
                type: 'image',
                content: url,
                time: this.formatTime(new Date()),
                isSelf: true
            };
            
            // 添加到消息列表
            this.messageList.push(message);
            
            // 保存聊天记录
            this.saveChatHistory();
            
            // 发送到服务器
            this.sendMessageToServer(message);
            
            // 滚动到底部 (由messageList的watch处理)
        },
        
        // 发送消息到服务器
        async sendMessageToServer(message) {
			console.log("发送消息")
            try {
                // 如果WebSocket已连接，通过WebSocket发送消息
                // if (this.isWebSocketConnected && this.websocket) {
                if (false) {
                    // 构建聊天消息对象
                    const chatMessage = {
                        type: 'text',
                        senderId: this.userInfo.userId || 0,
                        senderName: this.userInfo.userName || '患者',
                        senderType: 'user',
                        receiverId: this.doctorId,
                        content: message.content
                    };
                    
                    // 发送消息
                    this.websocket.send(JSON.stringify(chatMessage));
                    console.log('通过WebSocket发送消息:', chatMessage);
                } else {
					console.log('通过Http发送消息:');
					console.log("doctorId:",this.doctorId);
                    // 如果WebSocket未连接，使用HTTP请求发送
                    const res = await request.post('/stroke/chat/send/'+ this.doctorId, {
						doctorId: this.doctorId,
						content: message.content,
						type: message.type
					});
                console.log('消息已发送到服务器', message);
                }
            } catch (error) {
                console.error('发送消息失败:', error);
                uni.showToast({
                    title: '发送失败，请重试',
                    icon: 'none'
                });
            }
        },
        // 上传图片
        uploadImage() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                success: (res) => {
                    if (res.tempFilePaths && res.tempFilePaths.length > 0) {
                        this.sendImage(res.tempFilePaths[0]);
                    }
                }
            });
        },
        // 恢复清空聊天记录功能
        clearChatHistory() {
            console.log('尝试清空聊天记录');
            uni.showModal({
                title: '提示',
                content: '确定要清空聊天记录吗？此操作不可恢复。',
                success: (res) => {
                    if (res.confirm) {
                        console.log('用户确认清空聊天记录');
                        // 清空消息列表
                        this.messageList = [];
                        
                        // 添加系统消息
                        this.messageList.push({
                            type: 'text',
                            content: `您好，我是${this.doctorInfo.name}，请问有什么可以帮您？`,
                            time: this.formatTime(new Date()),
                            isSelf: false
                        });
                        
                        // 保存更改
                        this.saveChatHistory();
                        
                        uni.showToast({
                            title: '聊天记录已清空',
                            icon: 'success'
                        });
                    } else {
                        console.log('用户取消清空聊天记录');
                    }
                }
            });
        },
        // 格式化时间，一天内只显示时分，一天以前显示完整年月日时分
        formatTime(date) {
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
            const messageDate = new Date(date).getTime();
            
            // 获取时分
            const hour = date.getHours().toString().padStart(2, '0');
            const minute = date.getMinutes().toString().padStart(2, '0');
            
            // 如果是今天的消息，只显示时分
            if (messageDate >= today) {
                return `${hour}:${minute}`;
            }
            
            // 不是今天的消息，显示完整年月日时分
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            
            return `${year}-${month}-${day} ${hour}:${minute}`;
        },
        // 结束对话功能
        endConsultation() {
            uni.showModal({
                title: '提示',
                content: '确定要结束本次咨询吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 保存聊天记录
                        this.saveChatHistory();
                        
                        // 显示评价提示
                        uni.showModal({
                            title: '咨询结束',
                            content: '是否对本次咨询进行评价？',
                            confirmText: '去评价',
                            cancelText: '稍后评价',
                            success: (res) => {
                                if (res.confirm) {
                                    uni.navigateTo({
                                        url: `/pages/consultation/review?id=${this.doctorId}`
                                    });
                                } else {
                                    uni.navigateBack();
                                }
                            }
                        });
                    }
                }
            });
        },
        // 提取日期部分的方法
        extractDateFromTime(time) {
            // 如果时间格式包含日期（如 "2023-05-15 10:30"）
            if (time && time.includes(' ')) {
                return time.split(' ')[0];
            }
            
            // 如果只有时间（如 "10:30"），则视为今天的消息
            const today = new Date();
            return `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
        },
        // 格式化日期显示
        formatDateForDisplay(dateStr) {
            if (!dateStr) return '';
            
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            
            const todayStr = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
            const yesterdayStr = `${yesterday.getFullYear()}-${(yesterday.getMonth() + 1).toString().padStart(2, '0')}-${yesterday.getDate().toString().padStart(2, '0')}`;
            
            if (dateStr === todayStr) {
                return '今天';
            } else if (dateStr === yesterdayStr) {
                return '昨天';
            } else {
                // 将YYYY-MM-DD转换为YYYY年MM月DD日
                const parts = dateStr.split('-');
                if (parts.length === 3) {
                    return `${parts[0]}年${parts[1]}月${parts[2]}日`;
                }
                return dateStr;
            }
        },
        // 只显示时间部分
        formatTimeOnly(time) {
            if (!time) return '';
            
            // 如果时间格式包含日期（如 "2023-05-15 10:30"）
            if (time.includes(' ')) {
                return time.split(' ')[1];
            }
            
            // 如果只有时间（如 "10:30"）
            return time;
        },
        // 查看用户或医生个人资料
        viewProfile(isSelf) {
            if (isSelf) {
                // 查看用户个人资料
                uni.navigateTo({
                    url: '/pages/consultation/user'
                });
            } else {
                // 查看医生资料
                uni.navigateTo({
                    url: `/pages/consultation/doctor?id=${this.doctorId}`
                });
            }
        },

        // 处理收到的WebSocket消息
        handleWebSocketMessage(data) {
            try {
				console.log("我进来聊天室")
                // 解析消息数据
                const message = JSON.parse(data);
                
				console.log(JSON.parse(message.content).content)
                // 只处理发送给当前用户的消息
                // if (message.receiverId == this.userInfo.userId) {
                    // 检查是否是医生发送的消息
                    if (message.senderId == this.doctorId) {
                        // 将接收到的消息添加到消息列表
                        const newMessage = {
                            type: message.type || 'text',
                            content: JSON.parse(message.content).content,
                            time: this.formatTime(new Date()),
                            isSelf: false
                        };
						console.log("我是这个医生的记录")
                        
						console.log(newMessage.content)
                        // 添加消息到列表并显示通知
                        this.messageList.push(newMessage);
						console.log(this.messageList)
                        this.saveChatHistory();
                        
                        // 显示消息通知
                        uni.showToast({
                            title: '收到新消息',
                            icon: 'none'
                        });
                    }
                // }
            } catch (error) {
                console.error('处理WebSocket消息出错:', error);
            }
        },
        // 初始化聊天数据
        initChatData() {
            // 隐藏原生TabBar
            uni.hideTabBar();
            
            // 加载医生信息和聊天记录
            this.loadDoctorInfo();
            
            console.log("doctorID：", this.doctorId);
        },
    },
    onLoad(options) {
        console.log('chat.vue onLoad:', options);
        if (options && options.userId) {
            this.doctorId = options.userId || this.doctorId;
            console.log('设置医生ID为:', this.doctorId);
            
            // 使用Vuex设置当前聊天医生ID
            this.$store.dispatch('app/setCurrentChatDoctorId', this.doctorId);
        }
        
        // 初始化聊天数据
        this.initChatData();
    },
    onShow() {
        // 确保自定义TabBar显示
        this.showCustomTabBar = true;
		
        // 使用Vuex设置当前聊天医生ID
        this.$store.dispatch('app/setCurrentChatDoctorId', this.doctorId);
        
        // 如果WebSocket未连接，尝试重连
        if (!this.isWebSocketConnected) {
            getApp().initWebSocket();
        }
		// 初始化聊天数据
		this.initChatData();
    },
    onReady() {
        // 确保TabBar可见
        this.showCustomTabBar = true;
    },
    onTabItemTap() {
        // 确保TabBar可见
        this.showCustomTabBar = true;
    },
    onUnload() {
        console.log('chat.vue onUnload');
        // 离开聊天页面时清除当前聊天医生ID
        this.$store.dispatch('app/setCurrentChatDoctorId', null);
        
        // 页面卸载时保存聊天记录
        this.saveChatHistory();
        console.log('页面卸载，聊天记录已保存');
        
        // 关闭WebSocket连接
        if (this.websocket) {
            this.websocket.close();
            this.isWebSocketConnected = false;
        }
    },
    onHide() {
        // 页面隐藏时保存聊天记录
        this.saveChatHistory();
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    display: flex;
    flex-direction: column;
    position: relative;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        position: sticky;
        top: 0;
        z-index: 100;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .chat-scroll {
        flex: 1;
        height: calc(100vh - 200rpx); /* 减去导航栏和输入框的高度 */
        padding-bottom: 160rpx; /* 增加底部空间，避免被输入框遮挡 */
        box-sizing: border-box;
        
        .chat-container {
            padding: 30rpx;
            padding-bottom: 200rpx;
            
            .system-message {
                text-align: center;
                margin-bottom: 30rpx;
                
                text {
                    font-size: 24rpx;
                    color: #999;
                    background-color: #fff;
                    padding: 10rpx 30rpx;
                    border-radius: 30rpx;
                }
            }
            
            .message-list {
                .message-item {
                    display: flex;
                    margin-bottom: 30rpx;
                    border-radius: 20rpx;
                    padding: 10rpx;
                    
                    &.highlight {
                        background-color: rgba(24, 144, 255, 0.2);
                    }
                    
                    &.self {
                        flex-direction: row-reverse;
                        
                        .content {
                            align-items: flex-end;
                            
                            .bubble {
                                background-color: #1890FF;
                                color: #fff;
                                
                                &.image {
                                    background-color: transparent;
                                }
                            }
                        }
                    }
                    
                    .avatar {
                        width: 80rpx;
                        height: 80rpx;
                        margin: 0 20rpx;
                        border-radius: 40rpx;
                        background-color: #f0f0f0; /* 默认背景，避免加载前空白 */
                        overflow: hidden;
                        
                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 40rpx;
                        }
                    }
                    
                    .content {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        
                        .bubble {
                            max-width: 65%;
                            padding: 20rpx;
                            border-radius: 20rpx;
                            background-color: #fff;
                            margin-bottom: 10rpx;
                            word-break: break-all; /* 确保文字换行 */
                            
                            &.text {
                                text {
                                    font-size: 28rpx;
                                    line-height: 1.4;
                                }
                            }
                            
                            &.image {
                                padding: 0;
                                background-color: transparent;
                                
                                image {
                                    max-width: 100%;
                                    border-radius: 10rpx;
                                }
                            }
                        }
                        
                        .time {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }
            }
        }
    }
    
    .input-area {
        background-color: #fff;
        padding: 20rpx 30rpx;
        border-top: 2rpx solid #F7F7FA;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
        
        .input-box {
            display: flex;
            align-items: center;
            
            .tools {
                display: flex;
                margin-right: 20rpx;
                
                .u-icon {
                    margin-right: 20rpx;
                }
            }
            
            .input {
                flex: 1;
                background-color: #F7F7FA;
                border-radius: 40rpx;
                padding: 0 30rpx;
                
                input {
                    height: 80rpx;
                    font-size: 28rpx;
                    width: 100%;
                }
            }
            
            .send {
                width: 120rpx;
                height: 80rpx;
                background-color: #1890FF;
                border-radius: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 20rpx;
                
                text {
                    font-size: 28rpx;
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }
    
    .safe-area-inset-bottom {
        height: env(safe-area-inset-bottom);
        width: 100%;
    }
}

.chat-content {
    .date-separator {
        display: flex;
        justify-content: center;
        margin: 10px 0;
        
        .date-text {
            background-color: rgba(0, 0, 0, 0.1);
            color: #333;
            font-size: 12px;
            padding: 2px 10px;
            border-radius: 10px;
        }
    }
}

.date-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx 0;
    
    .date-text {
        background-color: rgba(0, 0, 0, 0.1);
        color: #666;
        font-size: 24rpx;
        padding: 6rpx 20rpx;
        border-radius: 20rpx;
    }
}
</style> 